<template>
	<view>
		<uni-section :title="d.titles" type="line" v-for="(d, index) in departments" :key="index">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(c, i) in d.list" :key="i" @click="itemClickHandler(c)">
					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="c.name" :size="22"></u-icon> -->
					<view class="departments-list-item">
						<image :src="c.detail_cover_url" />
						<text class="grid-text">{{c.name}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				departments: [],
				formData: {},
				j_id: ''
			}
		},
		onLoad(option) {
			this.formData = option.formData
			this.j_id = option.j_id
			this.loadDepartments()
		},
		methods: {
			/**
			 * 获取科室列表
			 */
			loadDepartments() {
				this.$app._get('entry/wxapp/faxian.departments', {}, (result) => {
					this.departments = result;
					console.log(result)
				})
			},
			itemClickHandler(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/onlinePrescribe/selectDoctor?formData=' + this.formData + '&j_id=' + this.j_id +
						'&deptid=' + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.departments-list-item {
		width: 100%;
		// height: 60px;
		padding: 20px;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;

		image {
			width: 50px;
			height: 50px;
		}
	}
</style>